<template>
  <div>
    <a :[attrs]="ahref">百度一下</a>
    <button @[btnAttr]="btnClick">按钮点击</button>
    <div>{{ id + 1 }}--- {{ obj.id.value + 1 }}</div>
    <div> {{ fullName2 }}
      <button @click="changeName">修改名称</button><br>
      firstName: {{ firstName }} lastName: {{ lastName }}
    </div>
    <ul>
      <li v-for="({ name, id }, index) in arr.list" :key="id">{{ name }}</li>
    </ul>
    <template v-for="(value, key, index) in person" :key>
      <li>{{ value }} --- {{ key }}</li>
    </template>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';

//1. 动态参数 的使用
const attrs = "href";
const ahref = "https://www.baidu.com";
const btnAttr = "click";
const btnClick = () => {
  console.log("按钮点击");
}

// 2.ref rective使用
const raw = {};
const proxy = reactive(raw);
console.log(proxy === reactive(raw));
console.log(proxy === reactive(proxy));


//3. 解包问题
const id = ref(0);
const obj = { id: ref(1) }

//4. 计算属性 它虽然可以更改，但是不建议修改，默认是返回getter函数，如果修改的话，建议修改computed中的依赖属性
const firstName = ref("zhang")
const lastName = ref("san")

const fullName1 = computed(() => firstName.value + '-' + lastName.value)
console.log(fullName1.value); //ComputedRefImpl实例  有一个value属性
const fullName2 = computed({
  get() {
    return firstName.value + '-' + lastName.value
  },
  set(val) {
    [firstName.value, lastName.value] = val.split("-");
  }
})
const changeName = () => {
  fullName2.value = "li-si"
}

//v-for 使用 解构  1.遍历数组  2.遍历对象 默认调用 Object.values() 返回value；可以在template中使用v-for和v-if
const arr = ref({
  list: [
    { id: 1, name: 'zhang ke' },
    { id: 2, name: 'li kui' },
    { id: 3, name: 'wang da fa' }
  ]
})

const person = reactive({
  name: "jhon dives",
  age: 22,
  city: "Guang Zhou"
})

</script>

<style scoped lang='scss'></style>
